import React, { useEffect, useState } from 'react';
import { Select, Input, Button, DatePicker } from 'antd';
import { SearchOutlined, ReloadOutlined } from '@ant-design/icons';
import style from '@/pages/IndexPage.css';
import zhCN from 'antd/es/date-picker/locale/zh_CN';

function TableSelector({ onSearch }) {
    const [name, setName] = useState('');
    const [phone, setPhone] = useState('');
    const [isActive, setIsActive] = useState('all');

    return (
        <div className={style['card-container']} style={{ boxShadow: 'none' }}>
            <div className={style['card-title']}>
                <span>查询表格</span>
            </div>
            <div
                className={style['card-content']}
                style={{
                    padding: '0',
                    display: 'flex',
                    alignItems: 'center',
                    padding: '0 1rem',
                }}
            >
                <div
                    style={{
                        display: 'inline-flex',
                        alignItems: 'center',
                        width: '260px',
                        marginRight: '1rem',
                    }}
                >
                    <span>姓名</span>
                    <Input style={{ flex:'1', marginLeft:'0.5rem' }} value={name} onChange={e=>setName(e.target.value)} />
                </div>
                <div
                    style={{
                        display: 'inline-flex',
                        alignItems: 'center',
                        width: '260px',
                        marginRight: '1rem',
                    }}
                >
                    <span>电话</span>
                    <Input style={{ flex:'1', marginLeft:'0.5rem' }} value={phone} onChange={e=>setPhone(e.target.value)} />
                </div>
                <div
                    style={{
                        display: 'inline-flex',
                        alignItems: 'center',
                        width: '260px',
                        marginRight: '1rem',
                    }}
                >
                    <span>是否启用</span>
                    <Select
                        style={{ flex: '1', marginLeft: '0.5rem' }}
                        value={isActive}
                        onChange={(value)=>setIsActive(value)}
                    >
                        <Option value="all">全部</Option>
                        <Option value={1}>是</Option>
                        <Option value={0}>否</Option>
                    </Select>
                </div>
                <div style={{ marginLeft: '1rem' }}>
                    <Button
                        type="primary"
                        icon={<SearchOutlined />}
                        style={{ marginRight: '0.5rem' }}
                        onClick={() => {
                            onSearch({ name, phone, isActive });
                        }}
                    >
                        查询
                    </Button>
                    <Button
                        icon={<ReloadOutlined />}
                        onClick={() => {
                            onSearch({});
                            setName('');
                            setPhone('');
                            setIsActive('all');
                        }}
                    >
                        重置
                    </Button>
                </div>
            </div>
        </div>
    );
}

export default TableSelector;
